import React, { useState } from 'react';
import { Form, Input, Button, Radio } from 'antd';
import ImgUpload from '../components/login/ImgUpload';
import { addShopApi, canShopApi, canTelApi } from '../apis/gen/genAPI';

export default function ShopIn(props) {
  const [shopStatus, setShopStatus] = useState(null);
  const [telStatus, setTelStatus] = useState(null);

  const isShopOk = async (e) => {
    // console.log('e',e.target.value);
    const value = e.target.value;
    const res = await canShopApi(value);
    // console.log('shop',res.data);
    setShopStatus(res.data.boo);
  };

  const isTelOk = async (e) => {
    // console.log('e',e.target.value);
    const value = e.target.value;
    const res = await canTelApi(value);
    setTelStatus(res.data.boo);
    console.log('tel', res.data);
  };
  const finish = (value) => {
    value.idCardImg = ShopIn.idCardImg.state.fileName[0];
    value.licenceImg = ShopIn.licenceImg.state.fileName[0];
    //   console.log('id',ShopIn.idCardImg.state.fileName);
    //   console.log(value);
    props.onFinish1(value);
  };
  return (
    <Form
      name="basic"
      labelCol={{
        span: 8,
      }}
      wrapperCol={{
        span: 16,
      }}
      initialValues={{
        remember: true,
      }}
      onFinish={finish}
      onFinishFailed={props.onFinishFailed1}
      autoComplete="off"
    >
      <Form.Item
        label="商铺类型"
        name="type"
        rules={[
          {
            required: true,
            message: '请选择类型',
          },
        ]}
      >
        <Radio.Group>
          <Radio value="0">充电站</Radio>
          <Radio value="1">其他</Radio>
        </Radio.Group>
      </Form.Item>

      <Form.Item
        label="商铺名称"
        name="shopName"
        hasFeedback
        validateStatus={shopStatus ? 'success' : ''}
        rules={[
          {
            required: true,
            message: '商铺名称不能为空',
          },
          ({ getFieldValue }) => ({
            validator(_, value) {
              if (shopStatus) {
                return Promise.resolve();
              }
              //   return Promise.reject(new Error('商铺名已被注册'));
            },
          }),
        ]}
      >
        <Input onBlur={(e) => isShopOk(e)} />
      </Form.Item>
      <Form.Item
        label="手机号"
        name="tel"
        hasFeedback
        validateStatus={telStatus ? 'success' : ''}
        rules={[
          {
            required: true,
            message: '手机号不能为空',
          },
          {
            pattern: RegExp(/^1[3-9][0-9]{9}$/),
            message: '请输入11位手机号',
          },
          ({ getFieldValue }) => ({
            validator(_, value) {
              if (telStatus) {
                return Promise.resolve();
              } else {
                // return Promise.reject(new Error('手机号不可用'));
              }
            },
          }),
        ]}
      >
        <Input onBlur={(e) => isTelOk(e)} />
      </Form.Item>
      <Form.Item
        label="店铺地址"
        name="address"
        rules={[
          {
            required: true,
            message: '店铺地址不能为空',
          },
        ]}
      >
        <Input />
      </Form.Item>
      <Form.Item
        label="注册人"
        name="managerName"
        rules={[
          {
            required: true,
            message: '注册人不能为空',
          },
        ]}
      >
        <Input />
      </Form.Item>
      <Form.Item
        label="身份证号"
        name="idCard"
        rules={[
          {
            required: true,
            message: '身份证号不能为空',
          },
        ]}
      >
        <Input />
      </Form.Item>
      <Form.Item label="身份证照片" name="idCardImg">
        <ImgUpload ref={(element) => (ShopIn.idCardImg = element)}></ImgUpload>
      </Form.Item>
      <Form.Item
        label="营业执照编号"
        name="licenceNo"
        rules={[
          {
            required: true,
            message: '营业执照编号不能为空',
          },
        ]}
      >
        <Input />
      </Form.Item>
      <Form.Item label="营业执照照片" name="licenceImg">
        <ImgUpload ref={(element) => (ShopIn.licenceImg = element)}></ImgUpload>
      </Form.Item>

      <Form.Item
        wrapperCol={{
          offset: 8,
          span: 16,
        }}
      >
        <Button type="primary" htmlType="submit">
          申请入驻
        </Button>
        <a style={{ marginLeft: '20px' }} onClick={props.changeToLog}>
          使用已有账户登录
        </a>
      </Form.Item>
    </Form>
  );
}
